<template>
	<view class="notice-index">
		<view class="notice-item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
			<view class="flex-between-center">
				<view class="flex-align-center">
					<view class="image-box" :class="{'un-read':item.isRead==0}">
						<static-image src="/pagesA/static/img/notice/icon-tzgg.png" width="40" height="40"></static-image>
					</view>
					<view class="font-s-16 fw-b mar-l-8">通知公告</view>
				</view>
				<view class="color-999 font-s-12">{{item.createTime}}</view>
			</view>
			<view class="text-over mar-t-15 fw-b">{{item.noticeTitle}}</view>
			<view class="text-over-clamp-2 line-height-44 mar-t-10 color-999">{{$common.filtrationHtml(item.noticeContent)}}</view>
			<view class="to-detail flex-between-center">
				<view class="">查看详情</view>
				<static-image src="/static/img/common/arrow-right.png" width="24" height="24"></static-image>
			</view>
		</view>
		<u-loadmore :status="status" v-if="list.length || status!='nomore'"/>
		<empty height="85vh" text="暂无消息提醒" v-else></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 15,
					noticeType: 1
				},
				list: [],
				status: 'loading'
			}
		},
		onReachBottom() {
			if(this.status === 'loadmore'){
				this.status = 'loading'
				this.getList()
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.$request({
					url: '/loginUserInfo/selectSysNoticePage',
					method: 'get',
					data:this.queryParams
				}).then(res => {
					this.list = this.list.concat(res.data.records)
					if(res.data.records.length<this.queryParams.pageSize){
						this.status = 'nomore'
					}else{
						this.status = 'loadmore'
						this.queryParams.pageNum++
					}
				})
			},
			toDetail(row){
				row.isRead = 1
				uni.navigateTo({
					url:'/pagesA/notice/detail?id='+row.noticeId
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.notice-index{
		padding: 24rpx;
		.notice-item{
			background: #FFFFFF;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 88rpx);
			border: 2rpx solid #FFFFFF;
			margin-bottom: 24rpx;
			padding: 26rpx 24rpx 0;
			.image-box{
				position: relative;
				&.un-read:after{
					content: '';
					width: 12rpx;
					height: 12rpx;
					background: #FF271F;
					border: 2rpx solid #FFFFFF;
					border-radius: 50%;
					position: absolute;
					right: -4rpx;
					top: -4rpx;
				}
			}
			.to-detail{
				border-top: 1rpx solid #eee;
				height: 76rpx;
				margin-top: 32rpx;
			}
		}
	}
</style>
